import { XmImage, XmNavbar, XmPullRefresh, XmTabbar } from "@/components/tool";
import { observer } from "mobx-react";
import React, { Fragment, useState } from "react";
import { RichText, Text, View } from '@tarojs/components';
import imgAddress from "@/static/images/address.png";
import homeTiltle from "@/static/images/homeTiltle.png";
import homekill from "@/static/images/kill.png";
// import homeIcon from "@/static/images/home-icon.png";
// import homeIcon2 from "@/static/images//home-icon2.png";
import { Cell } from "@taroify/core";
import { XmIcon } from "@/components/ui";
import dayjs from "dayjs";
import { Router } from "@/path/router";
import { useCommonInit } from "@/path/api/common";
import { XmPedometer } from "@/components/ui";
import { chooseTimeDay } from "@/pages/bussiness/untils";
import { useShareAppMessage } from "@tarojs/taro";
// import { toRichText } from "@/path/router/routers";
import './index.scss'
import { formatRichText } from "@/path/tool/until";
function Index() {
  const [params, setParams] = useState({
    peopleNum: 1,
    day: new Date()
  })
  // const { resData: indexList } = useIndexInfo()
  const { resData: commonInit } = useCommonInit()

  useShareAppMessage(() => {
    return {

    }
  })

  function onDayTime() {
    chooseTimeDay(params.day, commonInit).then((res) => {
      setParams({
        ...params,
        day: res.date
      })
    })
  }

  function onSearchCoupon() {
    Router.toOrderDetail(params).then((res) => {
      setParams({
        ...params,
        ...(res || {})
      })
    })
  }
  // function onRichText() {
  //   toRichText({ text: commonInit.introduction, title: "咨询详情" })
  // }

  return <View className="bg-page">
    <XmNavbar title="玄妙观" fixed={false} leftIcon={imgAddress}></XmNavbar>
    <XmPullRefresh navigationStyle="custom" className="home-page public-cell" renderButtom={<XmTabbar></XmTabbar>}>
      <View className="home-top">
        <XmImage size="420*116" static src={homeTiltle}></XmImage>
        <XmImage size="148" static src={homekill} onClick={_ => Router.toVerification()}></XmImage>
      </View>
      <Cell.Group inset>
        <Cell title={<Text className="s-lg c-gray-6">购票人数</Text>}>
          <View className="flex flex-end t-left s-lg c-black f-weight-bold">
            <XmPedometer value={params.peopleNum} min={1}
              onChange={e => setParams({
                ...params,
                peopleNum: e === "add" ? params.peopleNum + 1 : params.peopleNum - 1
              })}></XmPedometer>
          </View>
        </Cell>
        <View className="border-btm"><View className="border"></View></View>
        <Cell title={<Text className="s-lg c-gray-6">购票日期</Text>} onClick={onDayTime}>
          <View className="flex t-left s-lg c-black f-weight-bold flex-end">
            <Text>{dayjs(params.day).format("MM月DD日")} {dayjs(params.day).format("ddd")}&nbsp;&nbsp;&nbsp;&nbsp;</Text>
            <XmIcon icon="arrow-right" size={20}></XmIcon>
          </View>
        </Cell>
        <View className="home-btn s-lg-1 f-weight-bold t-center c-white" onClick={onSearchCoupon}>查询购票</View>
      </Cell.Group>
      {/* {indexList && indexList.length > 0 ? <View className="home-bot">
        <View className="flex flex-s home-bot-tit">
          <View className="s-lg-1-1 c-red f-weight-bold">特价票·享优惠</View>
          <View className="flex flex-s s-sm-2">
            <View className="flex icon-box">
              <XmImage size="32*32" static src={homeIcon} className="m-r"></XmImage>
              全免票
            </View>
            <View className="flex">
              <XmImage size="32*32" static src={homeIcon2} className="m-r"></XmImage>
              半价票
            </View>
          </View>
        </View>
        <View className="home-bot-card ">
          {indexList.map((val, idx) => <View className="card-itm flex flex-s" key={idx}>
            <View className="s-lg c-red f-weight-bold border t-right">{val.name}</View>
            <View className="content bg-xs flex flex-s">
              <View className="txt">
                <View className="s-md-2 c-black f-weight-bold">优惠对象</View>
                <View className="s-xxs c-gray-6">{val.introduce}</View>
              </View>
              <Button className="btn s-sm-2 c-white t-center">窗口咨询</Button>
            </View>
          </View>)}
        </View>
      </View> : null} */}

      {commonInit.introduction && <View className="rich-text">
        <RichText style="white-space: pre-wrap" nodes={formatRichText(commonInit.introduction || "")}></RichText>
      </View>}
    </XmPullRefresh>
  </View>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
